<template>
	<view>
		<!-- 出差报销审批 -->
		<view class="head_tb">
			<u-tabs :activeStyle="{
						 fontSize:'29rpx',
						 color:'#007aff'
			         }" :inactiveStyle="{
						 fontSize:'28rpx'
			         }" :scrollable='false' :lineWidth='30' itemStyle='height:90rpx;width:25%' :list="list1" @click="checkbtn">
			</u-tabs>
		</view>

		<!-- 基本信息 -->
		<view class="msp">
			<CellChild :addlist='addlist' title='基本信息' :rows='rows' :fileNo = 'fileNo' id='add_one'>
			</CellChild>
		</view>
	

		<!-- 费用总汇 -->
		<view class="formcard">
			<view class="bodtitle" style="border-bottom: none;">
				<p><b>费用汇总</b></p>
			</view>
			<view class="cost_money">
				<p>代购机票金额</p>
				<p>机票退改签金额</p>
				<p>报销金额</p>
			</view>
			<view class="money_num">
				<p>{{commonApi.formatAmt(rows.flightAmt)}}</p>
				<p>{{commonApi.formatAmt(rows.flightChangeAmt)}}</p>
				<p>{{commonApi.formatAmt(rows.reiAmt)}}</p>
			</view>
			<view class="cost_money">
				<p>补贴金额</p>
				<p>财务审核金额</p>
				<p>借款金额</p>
			</view>
			<view class="money_num">
				<p>{{commonApi.formatAmt(rows.subTotalAmt)}}</p>
				<p>{{commonApi.formatAmt(rows.auditAmt)}}</p>
				<p>{{commonApi.formatAmt(rows.borrowAmt)}}</p>
			</view>
			<view class="cost_money">
				<p>还款金额</p>
				<p>支付金额</p>
			</view>
			<view class="money_num">
				<p>{{commonApi.formatAmt(rows.repayAmt)}}</p>
				<p>{{commonApi.formatAmt(rows.payAmt)}}</p>
			</view>
		</view>
		
		<!-- 出差人 -->
		<view class="formcard">
			
			<view class="bodtitle">
				<p><b>出差人</b></p>
			</view>
			<view  class="fordis">
				<span v-for="(a,index) in reiRouteEntities" :class="indexs == index ?'spans':''"  @click='btncheck(a,index)'>{{a.empNm}}</span>
			</view>
			
		</view>
		
		
		<view>
			<view class="formcard" id='add_two'>
				
				<view class="bodtitle">
					<p><b>行程反馈</b></p>
				</view>
				<view>
				
					<!-- <view class="bod_cost">
						<view class="bus">
							<span>申请人</span>
						</view>
						<p>{{reiRouteEntities1.empNm}}</p>
					</view> -->
					<view class="bod_cost" >
						<view class="bus">
							<span>出差开始日期</span>
						</view>
						<p>{{reiRouteEntities1.startDate}}</p>
					</view>
					<view class="bod_cost">
						<view class="bus">
							<span>出差结束日期</span>
						</view>
						<p>{{reiRouteEntities1.endDate}}</p>
					</view>
					<view class="bod_cost">
						<view class="bus">
							<span>出发地点</span>
						</view>
						<p>{{reiRouteEntities1.startLocation}}</p>
					</view>
					<view class="bod_cost">
						<view class="bus">
							<span>到达地点</span>
						</view>
						<p>{{reiRouteEntities1.dest}}</p>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 费用明细 -->
		<view class="formcard" id="add_three" >
			<view class="bodtitle" style="border-bottom: none;" >
				<p><b>费用明细</b></p>
			</view>
			
			<view>
			<view class="bod_cost">
				<view class="bus">
					<image src="@/static/newimg/ysfy/jtf.svg" mode="widthFix"></image>
					<p>交通费</p>
				</view>
					<p style='font-weight: bold'><label
							class='moeny'><label
							class='moeny' style="font-size: 24rpx;color: #999;">合计</label>￥</label><span class='yetext'>{{commonApi.formatAmt(reiRouteEntities1.xcFlyTickets+reiRouteEntities1.xcFlyTax+
							reiRouteEntities1.xcFlyTax+reiRouteEntities1.xcTrainTickets+reiRouteEntities1.noXcTrainTickets+reiRouteEntities1.xcTrainTax+
							reiRouteEntities1.noAutBusTickets+reiRouteEntities1.autBusTickets+reiRouteEntities1.autBusTicketsAtx)}}</span></p>
			</view>
			<!-- //表单 -->
				<u-form labelPosition="left" :model="costmodel" :rules="rules" ref="userform">
				
					<u-form-item labelWidth="260rpx" label="携程机票金额" borderBottom>
						<p class='rig'>{{commonApi.formatAmt(reiRouteEntities1.xcFlyTickets)}}</p>
					</u-form-item>
				
					<u-form-item labelWidth="260rpx" label="非携程机票金额" borderBottom>
						<p class='rig'>{{commonApi.formatAmt(reiRouteEntities1.xcFlyTax)}}</p>
					</u-form-item>
					
					<u-form-item labelWidth="260rpx" label="非携程机票税额" borderBottom>
						<p class='rig'>{{commonApi.formatAmt(reiRouteEntities1.xcFlyTax)}}</p>
					</u-form-item>
					
					<u-form-item labelWidth="260rpx" label="携程火车票金额" borderBottom>
						<p class='rig'>{{commonApi.formatAmt(reiRouteEntities1.xcTrainTickets)}}</p>
					</u-form-item>
					
					<u-form-item labelWidth="260rpx" label="非携程火车票金额" borderBottom>
						<p class='rig'>{{commonApi.formatAmt(reiRouteEntities1.noXcTrainTickets)}}</p>
					</u-form-item>
					
					<u-form-item labelWidth="260rpx" label="非携程火车票税额" borderBottom>
						<p class='rig'>{{commonApi.formatAmt(reiRouteEntities1.xcTrainTax)}}</p>
					</u-form-item>
					
					<u-form-item labelWidth="260rpx" label="非实名车票金额" borderBottom>
						<p class='rig'>{{commonApi.formatAmt(reiRouteEntities1.noAutBusTickets)}}</p>
					</u-form-item>
					
					<u-form-item labelWidth="260rpx" label="实名车票金额" borderBottom>
						<p class='rig'>{{commonApi.formatAmt(reiRouteEntities1.autBusTickets)}}</p>
					</u-form-item>
					
					<u-form-item labelWidth="260rpx" label="实名车票税额	" borderBottom>
						<p class='rig'>{{commonApi.formatAmt(reiRouteEntities1.autBusTicketsAtx)}}</p>
					</u-form-item>
				</u-form>
			</view>
		</view>

		<!-- 住宿费 -->
		<view class="formcard">
			<view class="bod_cost">
				<view class="bus">
					<image src="@/static/newimg/ysfy/zsf.svg" mode="widthFix"></image>
					<p>住宿费</p>
				</view>
				<p style='font-weight: bold'><label class='moeny'><label
							class='moeny' style="font-size: 24rpx;color: #999;">合计</label>￥</label><span class='yetext'>{{commonApi.formatAmt(reiRouteEntities1.xcHotelAmt+reiRouteEntities1.xcTrainTax)}}</span></p>
			</view>
			<!-- //表单 -->
			<u-form labelPosition="left" :model="costmodel" :rules="rules" ref="userform">
				<u-form-item labelWidth="260rpx" label="是否指定酒店" prop="userInfo.name" borderBottom>
					<p class='rig'>{{reiRouteEntities1.isOfficialHotel == '0'?'否':'是'}}</p>
				</u-form-item>
			
				<u-form-item labelWidth="260rpx" label="携程酒店费" prop="userInfo.name" borderBottom>
					<p class='rig'>{{commonApi.formatAmt(reiRouteEntities1.xcHotelAmt)}}</p>
				</u-form-item>
			
				<u-form-item labelWidth="260rpx" label="非携程酒店费" prop="userInfo.name">
					<p class='rig'>{{commonApi.formatAmt(reiRouteEntities1.xcTrainTax)}}</p>
				</u-form-item>
			</u-form>
		</view>

		<!-- 其他 -->
		<view class="formcard" >
			<view class="bod_cost">
				<view class="bus">
					<image src="@/static/newimg/ysfy/qt.svg" mode="widthFix"></image>
					<p>其他</p>
				</view>
				<p style='font-weight: bold'><label class='moeny'><label
							class='moeny' style="font-size: 24rpx;color: #999;">合计</label>￥</label><span class='yetext'>{{commonApi.formatAmt(reiRouteEntities1.otherAmt+reiRouteEntities1.packageAmt)}}</span></p>
			</view>
			<!-- //表单 -->
			<u-form labelPosition="left" :model="costmodel" :rules="rules" ref="userform">
				<u-form-item labelWidth="260rpx" label="包干路费" borderBottom>
					<p class='rig'>{{commonApi.formatAmt(reiRouteEntities1.packageAmt)}}</p>
				</u-form-item>

				<u-form-item labelWidth="260rpx" label="其他费用" borderBottom>
					<p class='rig'>{{commonApi.formatAmt(reiRouteEntities1.otherAmt)}}</p>
				</u-form-item>
			</u-form>
		</view>

		<!-- 补助金额 -->
		<view class="formcard">
			<view class="bod_cost">
				<view class="bus">
					<image src="@/static/newimg/ysfy/bzje.svg" mode="widthFix"></image>
					<p>补助金额</p>
				</view>
				<p style='font-weight: bold'><label class='moeny'><label
							class='moeny' style="font-size: 24rpx;color: #999;">合计</label>￥</label><span class='yetext'>{{commonApi.formatAmt(rows.subTotalAmt)}}</span></p>
			</view>
			<!-- //表单 -->

			<u-form labelPosition="left" :model="costmodel" :rules="rules" ref="userform">
						<u-form-item labelWidth="260rpx" label="补贴天数" borderBottom>
							<input disabled class="pdlf" type="text" v-model="reiRouteEntities1.subsidyDays">
						</u-form-item>

						<u-form-item labelWidth="260rpx" label="交通补贴"borderBottom >
							<p class='rig'>{{commonApi.formatAmt(reiRouteEntities1.vehicleSubsidyAmt)}}</p>
						</u-form-item>

						<u-form-item labelWidth="260rpx" label="中餐补贴" borderBottom >
							<p class='rig'>{{commonApi.formatAmt(reiRouteEntities1.lunchSubsidyAmt)}}</p>
						</u-form-item>

						<u-form-item labelWidth="260rpx" label="晚餐补贴"  borderBottom >
							<p class='rig'>{{commonApi.formatAmt(reiRouteEntities1.dinnerSubsidyAmt)}}</p>
						</u-form-item>

						<u-form-item labelWidth="260rpx" label="休息日补贴"	borderBottom >
							<p class='rig'>{{commonApi.formatAmt(reiRouteEntities1.dateOffSub)}}</p>
						</u-form-item>
			</u-form>
		</view>

		<!-- 借款金额 -->
		<view class="formcard" v-for="(item,index) in borrowmEntities">
			<view class="bod_cost">
				<view class="bus">
					<p>借款金额</p>
				</view>
				<p><b><label class='moeny'>￥</label><span class='yetext'>{{commonApi.formatAmt(item.borrowAmt)}}</span></b></p>
			</view>
			<view class="skyb">
				<label class="lab">{{item.reiVoucherId}}</label>
				<view class="skyblu">
					<span>借款人</span>
					<p>{{item.userName}}</p>
				</view>
				<view class="skyblu">
					<span>借款金额</span>
					<p>{{item.borrowAmt}}</p>
				</view>
				<view class="skyblu">
					<span>借款类型</span>
					<p>{{item.billType}}</p>
				</view>
				<view class="skyblu">
					<span>借款事由</span>
					<p>{{item.reasons}}</p>
				</view>
			</view>
		</view>

		<view class="formcard">
			<view class="bod_cost">
				<view class="bus" style="width: 100%; justify-content: space-between;">
					<p>司机班确认<label style="color: red;">*</label></p>
					<view style="display: flex;">
						<p>{{reiRouteEntities1.isCompanyFilght == 1 ? '是':'否'}}</p>
					</view>
				</view>
			</view>
		</view>

		<view class="formcard" id="add_four">
			<view>
				<view class="bod_cost">
					<view class="bus" style="width: 100%; justify-content: space-between;">
						<p>财务审核<label style="color: red;">*</label></p>
					</view>
				</view>
				<view class="bod_cost">
					<view class="bottom_text">
						<p>审核金额<label style="color: red;">*</label></p>
						<span>{{commonApi.formatAmt(reiRouteEntities1.auditAmt)}}</span>
					</view>
				</view>
				<view class="bod_cost">
					<view class="bottom_text">
						<p>税额<label style="color: red;">*</label></p>
						<span>{{commonApi.formatAmt(reiRouteEntities1.auditTax)}}</span>
					</view>
				</view>
				<view class="bod_cost">
					<view class="bottom_text">
						<p>备注<label style="color: red;">*</label></p>
					</view>
				</view>
				<view style="padding: 20rpx 40rpx;margin-bottom: 40rpx;">
					<p>{{reiRouteEntities1.financeRemark}}</p>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [{
						name: '基本信息',
					},
					{
						name: '行程反馈'
					},
					{
						name: '费用明细'
					},
					{
						name: '财务审核',
					},
				],
				addlist: [{
						tit: '报销单号',
						val: 'busiTripNo'
					},
					{
						tit: '报销人',
						val: 'empNm'
					},
					// {
					// 	tit: '工号',
					// 	val: 'empNo'
					// },
					{
						tit: '费用承担科室',
						val: 'subdeptNm'
					},
					{
						tit: '报销日期',
						val: 'subDate'
					},
					{
						tit: '关联出差申请单',
						val: ''
					},
					{
						tit: '纸质单据张数',
						val: ''
					},
					{
						tit: '联系电话',
						val: 'phone',
					},
					{
						tit: '报销说明',
						val: 'reasons'
					},
				],
				rows: [],
				costmodel: {
					userInfo: {
					}
				},
				rules: {},
				tripshow: false, //去程显示隐藏
				backshow: false, //去程显示隐藏
				value1: '',
				reiRouteEntities:[
				],
				borrowmEntities:[],
				reiRouteEntities1:[],
				indexs:0,
				fileNo:[]
			}
		},
		onLoad() {
			//获取流程页面的流程上下文[实用的流程信息从这里获取]
			 let billNo= window.parent.myvm.wfContext.BusinessKey;
			 this.fileNo = window.parent.myvm.wfContext.BusinessKey;
			 this.getlist(billNo)
		},
		mounted() {
			var that = this;
			window.myvm = that;
			window.$urlFormVue = that;
		},
		computed:{
			mos(){
				return parseInt(this.reiRouteEntities.otherAmt + this.reiRouteEntities.packageAmt)
			}
		},
		methods: {
			getlist(reimTripmNo){
				let _this = this
				let params = {
					reimTripmNo
				}
				_this.$lyRequest.get('/gateway/reim/mp/dbsap/reimTripmEntity/getReimTripm.do',
					params
				).then((result)=>{
					if(result.success){
						this.traveList(result.data.rows)
					}else{
						console.log(result.data.msg)
					}
				})	
			},
			traveList(rows){
				this.rows = rows
				this.reiRouteEntities =rows.reiRouteEntities
				this.borrowmEntities = rows.borrowmEntities
				if(this.rows.tripType == 0){
					this.rows.tripType ='工作出差'
				}else if(this.rows.tripType == 1){
					this.rows.tripType ='培训出差'
				}
				
				this.reiRouteEntities1 = rows.reiRouteEntities[0]
			},
			//审批和驳回-工作流点击"提交"时触发此函数，返回:空字符串:工作流继续提交，返回"具体错误信息":工作流不提交
			rejectWorkflow(btnDef) {
				return "";
			},
			//作废-工作流点击"作废"时触发此函数，返回:空字符串:工作流继续提交，返回"具体错误信息":工作流不提交
			//content为作废意见
			invalidWorkflow(content) {
				return "";
			},
			//转办-工作流点击"确认转办"时触发此函数，返回:空字符串:工作流继续提交，返回"具体错误信息":工作流不提交
			//opinion:转办意见
			referredWorkflow(opinion) {
				return "";
			},
			//校验-工作流点击"提交"时触校验函数，返回:true校验通过，false校验不通过；
			//也可以返回具体的错误信息：空字符串，校验通过，返回具体错误信息校验不通过，同时弹出具体的错误信息。
			validateWorkflowForm(btnDef,callback) {
				callback("");
			},
			//提交单据
			sendWorkflow(btnDef, callback) {
				callback("");
			},
			checkbtn(item) { //切换tabs
				if (item.index === 0) {
					this.commonApi.goAnchor('add_one')
				} else if (item.index === 1) {
					this.commonApi.goAnchor('add_two')
				} else if (item.index === 2) {
					this.commonApi.goAnchor('add_three')
				} else if (item.index === 3) {
					this.commonApi.goAnchor('add_four')
				}
			},
			btncheck(a,index){
				this.reiRouteEntities1 = a
				this.indexs = index
			}
		},
		components: {}
	}
</script>

<style scoped lang="scss">
	.cost_money {
		width: 80%;
		margin: 0 auto;
		background-color: #f7fbff;
		display: flex;
		justify-content: space-between;
		padding: 10rpx 20rpx;
	}

	.money_num {
		background-color: white;
		font-size: 38rpx;
		display: flex;
		justify-content: space-between;
		width: 80%;
		margin: 30rpx auto;
		p {
			font-weight: bold;
		}
	}

	.bod_cost {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		p {
			// font-weight: bold;
		}

		label {
			// font-weight: bold;
		}
	}

	.bus {
		display: flex;
		flex-direction: row;
		align-items: center;

		p {
			font-size: 32rpx;
			padding-left: 5rpx;
		}

		image {
			width: 50rpx;
		}
	}

	.skyb {
		width: 90%;
		margin: 20rpx auto;
		background: rgb(247, 251, 255);
		padding: 5rpx 10rpx;

		.lab {
			display: block;
			height: 80rpx;
			line-height: 80rpx;
			padding-left: 10rpx;
			border-bottom: 1px solid #f1f1f1;
		}

		.skyblu {
			display: flex;
			flex-direction: row;
			padding: 20rpx 20rpx;

			span {
				width: 200rpx;
			}

			p {
				margin-left: 30rpx;
			}
		}
	}

	.yetext {
		color: rgb(255, 97, 4);
		font-size: 38rpx;
		padding-right: 5rpx;
	}

	.moeny {
		color: rgb(255, 97, 4);
	}

	.bottom_text {
		display: flex;
		font-weight: 500;
		color: #666;
		width: 100%;
		justify-content: space-between;
	}

	.u-textarea {
		background-color: #fafafa;
		margin: 10rpx 0;
	}
	.rig{
		text-align: right;
		display: inline-block;
		width: 100%;
		font-size: 30rpx;
	}
	.fordis{
		display: flex;
		width: 90%;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		.spans{
			width: 33%;
			height: 60rpx;
			background-color: #f0f8fe;
			color: #317ef6;
			border-radius: 50rpx;
			text-align: center;
			line-height: 60rpx;
			margin: 10rpx 20rpx;
		}
		span{
			width: 33%;
			height: 60rpx;
			background-color: #f7f7f7;
			color: rgb(101,103,105);
			border-radius: 50rpx;
			text-align: center;
			line-height: 60rpx;
			margin: 10rpx 20rpx;
		}
	}
</style>
